<template>
  <div>
    <Card style="height: 240px; padding: 12px 12px 0px">
      <div class="head-title">基本信息</div>
      <div class="detail-body">
        <div class="ant-col-md-6">
          <div class="info">
            <div class="head-info">
              <Avatar size="large" :src="memberInfo.face?memberInfo.face:''" />
              <div>
                <div
                  class="name"
                  v-if="memberInfo.username && memberInfo.username.length > 15"
                >
                  {{ memberInfo.username.slice(0, 15) }}...
                </div>
                <div class="name" v-else>
                  {{ memberInfo.username }}
                </div>
                <div class="phone">
                  {{ memberInfo.mobile }}
                </div>
                <div class="phone">
                  {{ memberInfo.gradeIdName }}
                </div>
              </div>
            </div>
            <div class="bottom-info">
              <p>上次登录 {{ memberInfo.lastLoginDate }}&nbsp;</p>
            </div>
          </div>
        </div>
        <div class="ant-col-md-6">
          <p class="item">
            <span class="label">推广人手机号：</span>
            <span class="info">{{
              memberInfo.extensionMobile ? memberInfo.extensionMobile : "-"
            }}</span>
          </p>
          <p class="item">
            <span class="label">注册时间：</span>
            <span class="info">{{
              memberInfo.createTime ? memberInfo.createTime : "-"
            }}</span>
          </p>
          <p class="item">
            <span class="label">地点：</span>
            <span class="info">{{
              memberInfo.locationName ? memberInfo.locationName : "-"
            }}</span>
          </p>
          <p class="item">
            <span class="label">充值钱包余额：</span>
            <span class="info">{{
              memberInfo.rechargeMoney ? memberInfo.rechargeMoney : 0
            }}</span>
          </p>
          <p class="item">
            <span class="label">推广钱包余额：</span>
            <span class="info">{{
              memberInfo.promoteMoney ? memberInfo.promoteMoney : 0
            }}</span>
          </p>
        </div>
        <div class="ant-col-md-6 detailTable">
          <Table
            highlight-row
            ref="currentRowTable"
            :columns="detailColums"
            :data="memberInfo.detailTableArr"
          ></Table>
        </div>
      </div>
    </Card>

    <Card class="mt_10">
      <Tabs value="order" @on-click="memberInfoChange" name="firstBox">
        <TabPane
          label="推广会员"
          name="order"
          style="min-height: 200px"
          tab="firstBox"
        >
          <tuiguang
            :memberId="this.$route.query.id"
            ref="tuiguanghuiyuan"
          ></tuiguang>
        </TabPane>
        <TabPane label="充值钱包" name="receipt" tab="firstBox">
          <chongzhi :memberId="this.$route.query.id" ref="chongzhi"></chongzhi>
        </TabPane>
        <TabPane label="推广钱包" name="tuiguangWallet" tab="firstBox">
          <tuiguangWallt
            :memberId="this.$route.query.id"
            walletType="PROMOTE"
            ref="tuiguangWallte"
          ></tuiguangWallt>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
import region from "@/views/lili-components/region";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import liliMap from "@/views/my-components/map/index";
import * as RegExp from "@/libs/RegExp.js";
import * as API_Order from "@/api/order.js";
import chongzhi from "@/views/partner-manager/components/user-partner-detail-tabs/chongzhi";
import tuiguangWallt from "@/views/partner-manager/components/user-partner-detail-tabs/tuiguangWallt";
import tuiguang from "@/views/partner-manager/components/user-partner-detailB-tabs/tuiguang";

export default {
  name: "user-partner-detail",
  components: {
    region,
    ossManage,
    liliMap,
    chongzhi,
    tuiguangWallt,
    tuiguang,
  },
  data() {
    return {
      id: "", //会员id
      loading: true, // 表单加载状态
      memberInfo: {}, //会员信息
      detailColums: [
        {
          title: "现金额",
          key: "price",
          align: "center",
        },
        {
          title: "对应焕贝额",
          key: "yiBei",
          align: "center",
        },
        {
          title: "支付时间",
          key: "payTime",
          align: "center",
        },
        {
          title: "生效起止时间",
          key: "beginTime",
          align: "center",
        },
      ], //会员信息头部端口费用标题
    };
  },
  methods: {
    init() {
      //查询会员信息
      this.getMemberInfo();
    },
    //会员信息tab改变事件
    memberInfoChange(v) {
      if (v == "order") {
        this.$refs.tuiguanghuiyuan.getOrderData();
      }
      if (v == "receipt") {
        if (this.$refs.chongzhi.$refs.tabsDefaultValue.activeKey == "shouru") {
          this.$refs.chongzhi.shouruData();
        } else {
          this.$refs.chongzhi.zhichu();
        }
      }
      if (v == "tuiguangWallet") {
        // 在此调取推广钱包接口
        if (
          this.$refs.tuiguangWallte.$refs.tabsDefaultValue.activeKey == "shouru"
        ) {
          this.$refs.tuiguangWallte.shouruData();
        } else {
          this.$refs.tuiguangWallte.zhichu();
        }
      }
    },
    //查询会员信息
    getMemberInfo() {
      let params = {
        id: this.id,
        state: "ANGEL_PARTNER",
      };
      API_Member.getMemberInfoData(params).then((res) => {
        this.$set(this, "memberInfo", res.result);
        // detailTableArr
        this.memberInfo.detailTableArr = [
          {
            price: res.result.price ? res.result.price : 0,
            yiBei: res.result.yiBei ? res.result.yiBei : 0,
            payTime: res.result.payTime?res.result.payTime:'-',
            beginTime: res.result.beginTime ? res.result.beginTime : "-",
          },
        ];
      });
    },
  },

  mounted() {
    this.id = this.$route.query.id;
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "user-partner-detail.scss";
.totleQuota {
  margin-left: auto;
  display: flex;
  align-items: center;
  p {
    padding: 0 15px;
    box-sizing: border-box;

    span {
      color: #ff5c58;
      padding-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.detailTable {
  width: 50% !important;
}
.Unbind {
  background: #f56c1d;
}
/deep/.ivu-tabs-bar {
  border: none !important;
}
</style>
